<template>
  <div class="main">
    <div class="left">
      <div class="g-wrap4">
        <h2 class="tit">
          推荐
        </h2>
        <ul class="nav">
          <li v-for="(u,i) in recommendList" :key="i">
            <router-link :to="{path:u.path}" :class="path===u.path?'active-a':''">{{u.name}}</router-link>
          </li>
        </ul>


        <div class="blk" v-for="(item,index) in artList" :key="index">
          <h2 class="tit">{{item.name}}</h2>
          <ul class="nav">
            <li v-for="(child,i) in item.typeName" :key="i">
              <router-link :to="{name:'OtherArtistView',query:{type:child.id,area:item.area}} " :class="area==item.area&&id==child.id?'active-a':''">{{child.name}}</router-link>
            </li>
          </ul>
        </div>

      </div>
    </div>

    <router-view :path="path"></router-view>
  </div>
</template>

<script>
export default {
  name: "index",

  data(){
    return {
      //推荐歌手分类
      recommendList:[
        {
          name:'推荐歌手',
          path:'/ArtistView/Signed',
        },
        {
          name:'入驻歌手',
          path: '/ArtistList/ArtistView',
        },
      ],
      // 歌手分类
      artList:[
        {
          name:'华语',
          area:7,
          type:[1,2,3],
          typeName:[{name:'华语男歌手',id:'1'},{name: '华语女歌手',id:'2'},{name: '华语组合/乐队',id:'3'}],
        },
        {
          name:'欧美',
          area:96,
          type:[1,2,3],
          typeName:[{name:'欧美男歌手',id:'1'},{name: '欧美女歌手',id:'2'},{name: '欧美组合/乐队',id:'3'}]
        },
        {
          name:'日本',
          area:8,
          type:[1,2,3],
          typeName:[{name:'日本男歌手',id:'1'},{name: '日本女歌手',id:'2'},{name: '日本组合/乐队',id:'3'}],
        },
        {
          name:'韩国',
          area:16,
          type:[1,2,3],
          typeName:[{name:'韩国男歌手',id:'1'},{name: '韩国女歌手',id:'2'},{name: '韩国组合/乐队',id:'3'}],
        },
        {
          name:'其他',
          area:0,
          type:[1,2,3],
          typeName:[{name:'其他男歌手',id:'1'},{name: '其他女歌手',id:'2'},{name: '其他组合/乐队',id:'3'}],
        },
      ],
      path:'',
      area:'',
      id:''
    }
  },
  mounted() {
    this.path = this.$route.path
    this.area = this.$route.query.area
    this.id = this.$route.query.type
  }
}
</script>

<style scoped lang="less">
.main {
  width: 982px;
  margin: 0 auto;
  height: auto;
  overflow: hidden;
  display: flex;
  background-color: #F5F5F5;
  border: 1px solid #D3D3D3;

  .left {
    position: relative;
    float: left;
    width: 180px;
    background-color: #F9F9F9;
    .g-wrap4 {
      padding: 0 10px 40px;
      margin-top: 51px;
      .tit{
        height: 25px;
        padding-left: 14px;
        font-size: 16px;
        font-family: "Microsoft Yahei";
      }
      .nav{
        &:after{
          clear: both;
          content: '.';
          display: block;
          height: 0;
          visibility: hidden;
        }
        li{
          margin-bottom: 2px;
          float: left;
          width: 160px;
          height: 29px;
          line-height: 29px;
          .active-a{
            background-position: 0 0;
            text-decoration: none;
            color: #c20c0c;
          }
          a{
            float: left;
            width: 160px;
            height: 29px;
            line-height: 29px;
            width: 133px;
            padding-left: 27px;
            background-position: 0 -30px;
            color: #333;
            background-image: url("../../assets/singer.png");
          }
        }
      }
      .blk{
        margin: 5px 0 0;
        padding-top: 16px;
        border-top: 1px solid #d3d3d3;
        .nav{
          &:after{
            margin-top: 2px;
            clear: both;
            content: '.';
            display: block;
            height: 0.5px;
            background-color: #D3D3D3;
            //visibility: hidden;
          }
          li{
            margin-bottom: 3px;
            float: left;
            width: 160px;
            height: 29px;
            line-height: 29px;
            .active-a{
              background-position: 0 0;
              text-decoration: none;
              color: #c20c0c;
            }
            a{
              float: left;
              width: 160px;
              height: 29px;
              line-height: 29px;
              width: 133px;
              padding-left: 27px;
              background-position: 0 -30px;
              color: #333;
              background-image: url("../../assets/singer.png");
            }
          }
        }
      }
    }
  }

  .right {
    flex: 1;
  }
}
</style>